<template>
  <div class="container">
    <div class="head">
      <img :src="headBg" alt="">
      <img class="headBg2" :src="headBg2" alt="">
      <div class="title">{{ state.title }}</div>
    </div>
    <div class="main">
      <div class="left">
        <div class="leftOne leftBox">
          <LeftOne :info1="state.allData?.chart1" :info2="state.allData?.chart2" :info3="state.allData?.chart3" />
        </div>
        <div class="leftTwo leftBox">
          <LeftTwo :info1="state.allData?.chart4" :info2="state.allData?.chart5" />
        </div>
        <div class="leftThree leftBox">
          <div class="leftThree-left">
            <LeftThree1 :info1="state.allData?.chart6" />
          </div>
          <div class="leftThree-right">
            <LeftThree2 :info1="state.allData?.chart7" />
          </div>
        </div>
        <div class="leftFour leftBox">
          <LeftFour :info1="state.allData?.chart8" :info2="state.allData?.chart9" />
        </div>
      </div>
      <div class="center">
        <img :src="centerBg" alt="">
      </div>
      <div class="right">
        <div class="rightOne rightBox30">
          <div class="gradient-title" @click="openChartDialog" style="cursor: pointer;">注册移交项目情况</div>
          <RightOne :info1="state.allData?.chart10" :info2="state.allData?.chart11" :info3="state.allData?.chart12">
          </RightOne>
        </div>
        <div class="rightTwo rightBox30">
          <div class="border-title" @click="openTableDialog" style="cursor: pointer;">引进产业链关键配套项目</div>
          <RightTwo :info1="state.allData?.chart13" :info2="state.allData?.chart14" :info3="state.allData?.chart15">
          </RightTwo>
        </div>
        <div class="rightThree rightBox40">
          <div class="border-title">项目投资实际到位</div>
          <RightThree :info1="state.allData?.chart16" :info2="state.allData?.chart17"></RightThree>
        </div>
      </div>
    </div>
    <dialog-table ref="dialogTableRef"></dialog-table>
    <dialog-chart ref="dialogChartRef"></dialog-chart>
  </div>
</template>

<script lang="ts" setup>
import headBg from "@/assets/headBg.png"
import headBg2 from "@/assets/head_bg.png"
import { defineAsyncComponent, onMounted, reactive, ref } from "vue";
import LeftOne from "@/components/left/leftOne.vue";
import LeftTwo from "@/components/left/leftTwo.vue";
import LeftThree1 from "@/components/left/leftThree1.vue";
import LeftThree2 from "@/components/left/leftThree2.vue";
import LeftFour from "@/components/left/leftFour.vue";

import RightOne from "@/components/right/rightOne.vue";
import RightTwo from "@/components/right/rightTwo.vue";
import RightThree from "@/components/right/rightThree.vue";
import { useDemoDataApi } from "@/api/demo";
import centerBg from "@/assets/centerBg.png"


const dialogTableRef = ref()
const dialogChartRef = ref()
const dialogTable = defineAsyncComponent(() => import('@/components/left/dialogTableTwo.vue'));
const dialogChart = defineAsyncComponent(() => import('@/components/left/dialogChart.vue'));
const state = reactive({
  allData: null as any,
  myCharts: [] as any,
  chartsChild1Data: null as any,
  title: ''
})
const openTableDialog = () => {
  dialogTableRef.value.openDialog()
}
const openChartDialog = () => {
  dialogChartRef.value.openDialog()
}
const getInfo = () => {
  useDemoDataApi().then((res: any) => {
    state.allData = res
    state.title = res.title
  })
}

onMounted(() => {
  getInfo()

})
</script>

<style scoped lang="scss">
.container {
  background-image: url('@/assets/bg.png');
  background-size: 100% 100%;
  width: 3840px;
  height: 1280px;

  .head {
    padding: 5px 20px 0;
    position: relative;

    img {
      width: 100%;
      height: 130px;
    }

    .headBg2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 118px;
  }

  .title {
    position: absolute;
    text-shadow: 1px 1px 1px #b6b6b6;
    top: 43%;
    color: #fff;
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 0.1em;
    font-size: 40px;
    font-weight: bold;
  }
}

.main {
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 155px);
  padding: 0 10px 10px;

  .left {
    width: 27%;
    background-image: url('@/assets/boxBorderWarp.png');
    background-size: 100% 100%;

    .leftBox {
      height: 25%;
    }

    .leftThree {
      display: flex;

      .leftThree-left {
        width: 50%;
      }

      .leftThree-right {
        width: 50%;
      }
    }
  }

  .center {
    width: 45%;
    height: 100%;
    background-image: url('@/assets/boxBorderWarp.png');
    background-size: 100% 100%;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .right {
    width: 27%;
    background-image: url('@/assets/boxBorderWarp.png');
    background-size: 100% 100%;

    .rightBox30 {
      height: 30%;
    }

    .rightBox40 {
      height: 40%;
    }
  }
}
}

.border-title {
  border-left: 4px solid #32ffc7;
  font-size: 18px;
  color: #fff;
  padding-left: 8px;
  height: 18px;
  line-height: 18px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}

.gradient-title {
  background: linear-gradient(to right, #5ab6e42a 1%, transparent 100%);
  color: #fff;
  text-shadow: 0 0 25px #fff;
  font-weight: bold;
  padding: 8px 10px;
  font-size: 20px
}
</style>